<template>
  <el-container>
    <el-main class="leftMain">
      <screen-index-tree :show-tabs="true" :show-device-index="true" :query-data="queryData"></screen-index-tree>
    </el-main>
    <el-main class="rightMain">
      <bs-main>
        <screen-index-condition slot="header" :query-data="queryData" @state="showState"></screen-index-condition>
        <list
          ref="list"
          class="center"
          height="calc(100vh - 220px)"
          :list-data="tableData"
          :table-tag="tableName"
          :has-select="true"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          :action-opts="actionOpts"
          @init-table="initTable"
          @sort="handleSort"
        >
          <template slot="tagListSlot" slot-scope="{row}">
            {{ row.tagList | tagListFilter }}
          </template>
        </list>
        <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" @pagination="doList"></pagination>
      </bs-main>
    </el-main>
    <screen-state-info-dialog></screen-state-info-dialog>
  </el-container>
</template>

<script>
import ScreenIndexCondition from './components/ScreenIndexCondition'
import ScreenStateInfoDialog from './components/state/ScreenStateInfoDialog'
import ScreenIndexTree from '../ScreenIndexTree'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import DeviceMonitorApi from '@/api/device'
import CommonApi from '@/api/common'
import ScreenApi from '@/api/screen'

export default {
  data() {
    const headerContextMenus = {
      width: '120px',
      items: [
        'sortUp',
        'sortDown',
        'line',
        'cols'
      ]
    }
    return {
      queryData: {
        queryType: 0
      },
      editorForm: {},
      selectedArr: [],
      tableData: [],
      actionOpts: {
        show: false
      },
      colData: [
        { label: '屏幕名称',  prop:'screenName', minwidth:'200', headerContextMenus },
        { label: '屏幕地址',  prop:'macText', minwidth:'100', headerContextMenus },
        { label: '分组',  prop:'groupName', minwidth:'100', headerContextMenus },
        { label: '车牌号码', prop:'carLicense', minwidth:'100', headerContextMenus },
        { label: '车辆编号', prop:'carNo', minwidth:'100', headerContextMenus },
        { label: '标签', prop:'tagList', headerContextMenus, slot: true }
      ],
      initColsProps: ['screenName', 'macText', 'groupName', 'carLicense', 'carNo', 'tagList'],
      pageData: {
        page: 1,
        total: 0,
        limit: 15
      },
      initHeadmuneFlag: false,
      tableName:'screenMonitorTableList'
    }
  },
  created() {
    this.$eventBus.$on('doList', this.doList)
    this.$eventBus.$on('doShowScreenState', this.showState)
  },
  beforeDestroy() {
    this.$eventBus.$off('doList')
    this.$eventBus.$off('doShowScreenState')
  },
  components: {
      ScreenIndexCondition,
      ScreenStateInfoDialog,
      ScreenIndexTree,
      List,
      Pagination
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doList()
    })
  },
  filters: {
    tagListFilter(val) {
      let msg = ''
      if(val) {
        const obj = val.reduce((pre, item) => {
          const tgname = item.tagCategoryName
          pre.item.push(item.tagName)
          return {name: tgname, item: pre.item}
        }, {
          name: '',
          item: []
        })
        return obj.name + ':' + obj.item.join(" ")
      }
      return ''
    }
  },
  methods: {
    initTable(config){
      this.initHeadmuneFlag = true
    },
    // 排序
    handleSort(sortInfo) {
      switch(sortInfo.prop) {
        case 'name':
          this.queryData.orderType = 1
          break;
        case 'width':
          this.queryData.orderType = 2
          break;
        case 'height':
          this.queryData.orderType = 3
          break;
        default:
          this.$alert('提示', '系统不支持排序')
          return;
      }
      this.queryData.orderParam = sortInfo.type
      this.doList()
    },
    // 查询列表
    async doList(current) {
      if(current) {
        this.pageData = {
          ...this.pageData,
          ...current
        }
      }
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      const res = await ScreenApi.screenMonitorList(queryData)
      if(res) {
        this.tableData = res.records ? res.records : []
        this.pageData.total = Number(res.total? res.total: 0)
      }
    },
    getActiveItem() {
      let items = this.$refs.list.getActiveItem()
      return items.length === 1 ? items[0] : items.length === 0 ? null : items
    },
    async showState() {
      const param = this.getActiveItem()
      if (!param) {
        this.$alert('提示', '请先选择对应的屏幕')
        return
      }
      if(param.length > 1) {
        this.$alert('提示', '只能选择一条记录')
        return
      }
      const res = await ScreenApi.screenMonitorByID({ screenId: param.screenId, terminalId: param.terminalId })
      this.$eventBus.$emit('doScreenStateInfo', res , param.screenId, param.terminalId)
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-tree>.el-tree-node {
//   min-width:100%;
//   height: calc(100vh - 164px);
//   display:inline-block;
// }
// ::v-deep .tree{width: 100%; height: 100%; overflow-x: scroll;
// // scrollbar-width: thin;
// }
::v-deep .el-tree-node {
    position: relative;
    padding-left: 10px;
}
</style>